<!--
 * @Author: 李金深 2896583081@qq.com
 * @Date: 2023-05-29 15:16:09
 * @LastEditors: 李金深 2896583081@qq.com
 * @LastEditTime: 2023-07-04 17:49:24
 * @FilePath: /com.huizhouyiren.web.d0101/src/components/comment/comment.vue
 * @Description: 评论组件
-->
<script setup>
import { ref } from "vue";
import { commentsRequest, commentReplyRequest } from "@/api/dynamic"
import { isNull } from "@/utils/check";
import mitt from "@/mitt/index"
import { useUser } from "@/stores/user"

const props = defineProps({
    id: { // 动态ID
        type: Number,
    },
    name: {
        type: String,
        default: ""
    },
    comment_id: { // 评论ID
        type: Number
    },
    bgClass: {
        type: String,
        default: 'bg-gray-100'
    }
})

const emit = defineEmits(['comment'])
const userStore = useUser()

let content = ref("")
let loading = ref(false)


const dataCheckFunc = () => {
    if (!isNull(content.value)) {
        loading.value = true
        props.id ? commentsFunc() : commentReply()
    } else {
        mitt.emit('messageTip', {
            type: "error",
            msg: "msg.inputText",
            useTranslate: true
        })
    }
}

/**
 * @description: 评论动态
 * @return {*}
 */
const commentsFunc = () => {
    commentsRequest({
        id: props.id,
        content: content.value,
    }).then(res => {
        if (res.code == 200) {

            emit("comment", {
                type: "comment",
                // list: res.data.data,
                content: content.value,
                id: res.data.id,
                nickname: userStore.userInfo.nickname,
            })
            content.value = ""
            mitt.emit('messageTip', {
                type: "success",
                msg: res.msg
            })
        } else {
            mitt.emit('messageTip', {
                type: "error",
                msg: res.msg
            })
        }
    }).finally(() => {
        loading.value = false
    })
}
/**
 * @description: 回复评论
 * @return {*}
 */
const commentReply = () => {
    commentReplyRequest({
        content: content.value,
        comment_id: props.comment_id
    }).then(res => {
        if (res.code == 200) {
            emit("comment", {
                nickname: userStore.userInfo.nickname,
                id: res.data,
                reply_nickname: props.name,
                content: content.value,
                commentId: props.comment_id
            })
            content.value = ""
            mitt.emit('messageTip', {
                type: "success",
                msg: res.msg
            })
        } else {
            mitt.emit('messageTip', {
                type: "error",
                msg: res.msg
            })
        }
    }).finally(() => {
        loading.value = false
    })
}


</script>
<style></style>
<template>
    <div class="flex items-center my-2 overflow-hidden text-xs rounded-md" :class="bgClass">
        <div class="flex items-center flex-1 p-2">
            <div class="text-gray-400 " v-if="name">
                @{{ name }} ：
            </div>
            <div class="flex-1">
                <input type="text" style="width: 100%;" v-model="content">
            </div>
        </div>
        <div style="width: 5.625rem;height: 2.375rem;cursor: pointer;" @click="dataCheckFunc"
            class="flex items-center justify-center h-full py-2 overflow-hidden text-xs text-white bg-primary">
            <n-button type="primary" style="width: 100%;height: 100%;" :loading="loading">{{ $t('system.submit')
            }}</n-button>
        </div>
    </div>
</template>